<template>
	<view class="goods-details">
		<navbar title="商品详情" :background="{background: `rgba(256,256,256,${percent})`}"
			:titleColor="`rgba(0,0,0,${percent})`" :immersive="true"></navbar>
		<!-- #ifdef H5 -->
		<download-nav v-if="showDownload" :top="44"></download-nav>
		<!-- #endif -->
		<loading-view v-if="isFirstLoading"></loading-view>
		<view class="contain" v-if="!isNull">
			<!-- <bubble-tips top="180rpx"></bubble-tips> -->
			<product-swiper :imgUrls="swiperList" :video="goodsDetail.video"></product-swiper>
			<!-- 秒杀 -->
			<view class="seckill row-between" v-if="goodsType == 1">
				<view class="price row">
					<view class="row white info">
						<view style="align-items: baseline;" class="row ml20">
							<view class="mr10">秒杀价</view>
							<price-format :first-size="46" :second-size="32" :subscript-size="32"
								:price="goodsDetail.min_price" :weight="500"></price-format>
							<template v-if="goodsDetail.min_price != goodsDetail.max_price">
								<text style="font-size: 46rpx;">-</text>
								<price-format :first-size="46" :second-size="32" :subscript-size="32"
									:show-subscript="false" :price="goodsDetail.max_price" :weight="500"></price-format>
							</template>
							<view class="ml10">
								<price-format :subscript-size="30" :line-through="true" :first-size="30"
									:second-size="30" :price="goodsDetail.market_price">
								</price-format>
							</view>
						</view>
					</view>
				</view>
				<view class="down column-center">
					<view class="xxs primary mb10">距活动结束仅剩</view>
					<u-count-down :timestamp="countTime" @end="getGoodsDetailFun" color="#fff" bg-color="#FF2C3C"
						separator-color="#FF2C3C" font-size="24" height="36" separator-size="26"></u-count-down>
				</view>
			</view>
			<!-- 拼团 -->
			<view class="group">
				<view class="row info" style="height: 100%">
					<view class="row-between ml20 white" style="flex: 1;">
						<view style="align-items: baseline;" class="row">
							<view class="mr10">拼团价</view>
							<price-format :subscript-size="32" :first-size="46" :second-size="32"
								:price="goodsDetail.price / 100" :weight="500"></price-format>
							<text class="xs">起</text>
						</view>
						<view class="mr20 row group-num">
							<view class="group-icon">
								<image src="/static/images/icon_group.png" class="icon-sm"></image>
							</view>
							<view class="xxs ml10 mr10">{{ goodsDetail.group_limit_num }}人团</view>
						</view>
					</view>
					<view class="down column-center">
						<view class="xxs primary mb10">距活动结束仅剩</view>
						<u-count-down :timestamp="countTime" color="#fff" bg-color="#FF2C3C" separator-color="#FF2C3C"
							font-size="24" height="36" separator-size="26" @end="getGoodsDetailFun"></u-count-down>
					</view>
				</view>
			</view>
			<view v-if="userInfo.new_discount_num===1||!userInfo.id" class="buy-text-tips ">
				<view class="buy-text-item">
					原预约金<text class="unit">￥</text>{{goodsDetail.prepay_amount / 100}}，
					新客红包<text class="unit">￥</text>{{goodsDetail.new_user_discount / 100}}，
					线上支付预约金仅需支付<text class="unit">￥</text>{{getPrepare}}，
					到院付尾款<text class="unit">￥</text>{{((goodsDetail.price-goodsDetail.prepay_amount) / 100)}}
				</view>
			</view>
			<view class="goods-info bg-white mb20">
				<view style="display: flex;align-items: center;justify-content: space-between;width: 100%;box-sizing: border-box;
				padding: 20rpx;">
					<view class="name lg bold" style="width: calc(100% - 100rpx);">{{ goodsDetail.title }}</view>
					<image class="icon-share" src="/static/images/share_001.png" @tap="showShareBtn = true"></image>
				</view>
				<view class="xs lighter" style="padding: 10rpx 24rpx">
					<text>已售: {{ goodsDetail.sale_num }} · </text> 平台保障 · 严审资格 · 闪电退款 · 先用后付
				</view>

				<view v-if="goodsDetail.brand && goodsDetail.dose" class="row-between xs lighter"
					style="padding: 0 24rpx 20rpx">
					<text v-if="goodsDetail.brand">品牌: {{ goodsDetail.brand }}</text>
					<text v-if="goodsDetail.dose">剂量: {{ goodsDetail.dose }}</text>
					<!-- <text v-if="goodsDetail.stock">库存: {{ goodsDetail.stock }}件</text> -->
				</view>
			</view>
			<view class="discount mt20 bg-white" v-if="couponList.length || goodsDetail.order_give_integral">
				<view class="row" style="align-items: flex-start;">
					<view class="text muted">优惠</view>
					<view style="flex: 1">
						<view :class="['row coupons', {mb30: goodsDetail.order_give_integral > 0}]"
							v-if="couponList.length" @tap="showCouponFun">
							<view class="flexnone">
								<u-tag text="领券" size="mini" type="primary" mode="plain" />
							</view>
							<view class="con row ml20" style="flex: 1">
								<view v-for="(item, index) in couponList" :key="index" class="coupons-item  mr20">
									<view v-if="index < 2" class="row xs">
										<view class="line1">
											{{ item.use_condition }}
										</view>
									</view>
								</view>
							</view>
							<image class="icon-sm" src="/static/images/arrow_right.png"></image>
						</view>
						<view class="row integral" style="align-items: flex-start;"
							v-if="goodsDetail.order_give_integral">
							<view class="flexnone">
								<u-tag text="积分" size="mini" type="primary" mode="plain" />
							</view>
							<view class="ml20">下单最多可获得{{goodsDetail.order_give_integral}}积分</view>
						</view>
					</view>
				</view>
			</view>
			<!-- <view class="last-gruop-list">
				<view class="last-gruop-title">
					这些人已拼，<text>参与可立即拼成</text>
				</view>
				<view class="last-gruop-main">
					<view class="last-gruop-item">
						<view class="last-gruop-item-left">
							<image class="last-gruop-item-left-icon" src="/static/images/icon_share.png"></image>
							<text>asdf</text>
						</view>
						<view class="last-gruop-item-right">
							
						</view>
					</view>
				</view>
			</view> -->
			<swiper v-if="teamFound.length" class="mt20 bg-white" autoplay="true" style="height: 240rpx;"
				vertical="true" circular="true" :interval="5000">
				<swiper-item v-for="(sitem, index) in teamFound" :key="index">
					<view class="group-list">
						<view v-for="(item, index2) in sitem" :key="index2" class="group-item bg-white row-between">
							<view class="row" style="max-width: 280rpx;">
								<custom-image :src="item.avatar" width="80rpx" height="80rpx" radius="50%">
								</custom-image>
								<view class="ml20 line1 normal">{{ item.nickname }}</view>
							</view>
							<view class="row ml20" style="flex: none;">
								<view class="column-center">
									<text class="sm normal">
										还差
										<text class="primary">{{ item.need - item.join }}</text>
										人成团
									</text>
									<view class="muted xs">
										剩余
										<u-count-down :timestamp="getTeamCountTime(item.found_end_time)"
											separator-color="#999" color="#999" :separator-size="24" :font-size="24"
											bg-color="transparent" @end="getGoodsDetailFun"></u-count-down>
									</view>
								</view>
								<view class="group-btn br60 white row-center" @tap="showSpecFun(3, item.id)">去参团</view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
			<!-- <view v-if="!goodsType" class="spec row bg-white mt20" @tap="showSpecFun(0)">
				<view class="text lighter">已选</view>
				<view class="line1 mr20" style="flex: 1;">{{ checkedGoods.spec_value_str || '默认' }}</view>
				<image class="icon-sm" src="/static/images/arrow_right.png"></image>
			</view> -->
			<view class="doctors bg-white" v-if="goodsDetail.doctors && goodsDetail.doctors.length">
				<view class="merchants-list">
					<view class="merchants-item" v-for="(item, index) in goodsDetail.doctors" :key="index">
						<view class="merchant-top">
							<view class="merchant-top-left">
								<custom-image :lazy-load="true" width="104rpx" mode="widthFix" height="104rpx"
									radius="52rpx" lazy-load :src="item.avatar"></custom-image>
								<view class="merchant-top-main">
									<view class="merchant-top-title">
										{{ item.name }}
									</view>
									<view v-if="item.zc" class="merchant-top-msg">
										职称：{{ item.zc }}
									</view>
									<view class="merchant-top-tips">
										<view class="merchant-tips-item" v-for="(_item, _index) in item.expert_at"
											:key="_index">
											{{ _item }}
										</view>
									</view>
								</view>
							</view>
							<!-- <view class="merchant-top-right">
								<navigator class="btn column-center" hover-class="none"
									url="/bundle/pages/contact_offical/contact_offical">
									<text class="xxs">私信咨询</text>
								</navigator>
							</view> -->
						</view>
					</view>
				</view>
			</view>
			<view v-if="false" class="evaluation bg-white mt20">
				<navigator hover-class="none" :url="'/pages/all_comments/all_comments?id=' + goodsDetail.id"
					class="title row-between">
					<view>
						<text class="balck md mr10">用户评价</text>
						<text class="primary sm">好评率{{ comment.goods_rate || '0%' }}</text>
					</view>
					<view class="row">
						<text class="lighter">查看全部</text>
						<image class="icon-sm" src="/static/images/arrow_right.png"></image>
					</view>
				</navigator>
				<view class="con" v-if="comment.goods_rate">
					<view class="user-info row">
						<image class="avatar mr20" :src="comment.avatar"></image>
						<view class="user-name md mr10">{{ comment.nickname }}</view>
					</view>
					<view class="muted xs mt10">
						<text class="mr20">{{ comment.create_time }}</text>
					</view>
					<view v-if="comment.comment" class="dec mt20">{{ comment.comment }}</view>
				</view>
				<view class="con row-center muted" v-else>暂无评价</view>
			</view>
			<view v-if="hospitalNum>0" class="near-hospital bg-white">
				<text class="near-hospital__title">门店</text>
				<view class="near-hospital-cont">
					<view class="near-hospital-cont__top row-between">
						<text class="near-hospital-cont__top-title">{{ selectedHospital.name }}</text>
						<view @click="onShowHospitalSelector" class="row near-hospital-cont__top-num">
							<text class="lighter">共{{ hospitalNum }}家门店</text>
							<image class="icon-sm" src="/static/images/arrow_right.png"></image>
						</view>
					</view>
					<view class="near-hospital-cont__address">
						<u-icon name="home"></u-icon><text>{{ selectedHospital.address_detail }}</text>
						<view>
							<text @click="goHospitalDetail(selectedHospital.id)"
								class="near-hospital-cont__address-license">查看资质</text>
						</view>
					</view>
					<view v-if="location.lon>0" class="near-hospital-cont__location">
						<u-icon
							name="map"></u-icon><text>距离您{{ getDistance(location.lat, location.lon, selectedHospital.lat, selectedHospital.lon) }}</text>
					</view>
				</view>
			</view>
			<view v-if="hospitalGiveway.length > 0" class="hospital-gw bg-white">
				<view class="hospital-gw__title u-border-bottom row-between">
					<text class="hospital-gw__title-text">福利：购买此商品，以下商家会额外赠送礼品</text>
				</view>
				<view v-for="(it,index) in hospitalGiveway" :key="index" class="hospital-gw__cont">
					<view class="hospital-gw__cont-item">{{ it.name }}：{{ it.giveaway_desc }}</view>
				</view>
			</view>
			<view class="details mt20 bg-white">
				<view class="title lg">商品详情</view>
				<view class="content">
					<u-parse :html="goodsDetail.description" :lazy-load="true" :show-with-animation="true"></u-parse>
				</view>
			</view>
			<view class="xz">
				<view class="lg mb20 xz-title">
					购买须知
				</view>
				<view class="xz-title" v-if="goodsDetail.expire_text">有效期</view>
				<view class="mb20 xz-value" v-if="goodsDetail.expire_text">{{ goodsDetail.expire_text }}</view>
				<view class="xz-title" v-if="goodsDetail.use_time_text">使用时间</view>
				<view class="mb20 xz-value" v-if="goodsDetail.use_time_text">{{ goodsDetail.use_time_text }}</view>
				<view class="xz-title" v-if="goodsDetail.order_time_text">预约时间</view>
				<view class="mb20 xz-value" v-if="goodsDetail.order_time_text">{{ goodsDetail.order_time_text }}</view>
				<view class="xz-title" v-if="goodsDetail.tips_text">温馨提示</view>
				<view class="mb20 xz-value" v-if="goodsDetail.tips_text">{{ goodsDetail.tips_text }}</view>
				<view class="xz-title" v-if="goodsDetail.preoperation_text">术前须知</view>
				<view class="mb20 xz-value" v-if="goodsDetail.preoperation_text">{{ goodsDetail.preoperation_text }}
				</view>
				<view class="xz-title" v-if="goodsDetail.to_hospital_reward">到院福利</view>
				<view class="mb20 xz-value" v-if="goodsDetail.to_hospital_reward">{{ goodsDetail.to_hospital_reward }}
				</view>
				<view class="xz-title">消费流程</view>
				<view class="mb20 xz-value">支付预付金保留团购优惠价权益，提前预约到店面诊，确认治疗提供下单电话号码，商家后台点击确认核销即可</view>
			</view>
			<view class="xz" style="margin-top: 20rpx;">
				<view class="lg mb20 xz-title">
					同店热门
				</view>
				<active-area type="hot" progressBarColor="#9912FE" :lists="indexList.list">
				</active-area>
				<loading-footer :status="indexList.status" :slot-empty="true">
					<view slot="empty" class="column-center" style="padding-top: 200rpx">
						<image class="img-null" src="/static/images/goods_null.png"></image>
						<text class="lighter">暂无商品</text>
					</view>
				</loading-footer>
			</view>
			<view class="footer row bg-white fixed"
				style="display: flex;align-items: center;justify-content: space-between;">
				<view class="btn column-center" @click="toContact">
					<image class="icon-md" src="/static/images/contact_001.png"></image>
					<text class="xxs lighter">客服</text>
				</view>
				<view v-if="false && btnText.yellow" class="add-cart br60 white mr10 md ml20" @tap="showSpecFun(1)">
					{{ btnText.yellow }}
				</view>
				<!-- <view class="right-buy br60 white mr20 ml10 md" @tap="showSpecFun(2)">{{ pageParams.action=='join_group' ? '参与拼团' : btnText.red }}</view> -->
				<view class="buy-text">
					<view class="buy-text-item">
						预付金可保留优惠权益
					</view>
					<view class="buy-text-item">
						且到院可抵扣所有项目
					</view>
				</view>
				<view class="buy-btn-container" @tap="showSpecFun(2)">
					<text class="unit">￥</text>{{ getPrepare }}
				</view>
			</view>
		</view>
		<view v-else>
			<view class="details-null column-center">
				<image class="img-null" src="/static/images/goods_null.png"></image>
				<view class="xs muted">该商品已下架或不存在，去逛逛别的吧~</view>
			</view>
			<recommend></recommend>
		</view>
		<spec-popup :show="showSpec" :goods="goodsDetail" :is-seckill="goodsType == 1" @close="showSpec = false"
			:show-add="popupType == 1 || popupType == 0" :show-buy="popupType == 2 || popupType == 0"
			:showConfirm="popupType == 3" @buynow="onBuy" @addcart="onAddCart" @change="onChangeGoods"
			:group="Boolean(isGroup)" :red-btn-text="btnText.red" :yellow-btn-text="btnText.yellow"
			@confirm="onConfirm"></spec-popup>

		<share-popup v-model="showShareBtn" :share-id="id" pagePath="pages/goods_details/goods_details" :type="1"
			:extra="share_extra" :config="{
				avatar: userInfo.avatar,
				nickname: userInfo.nickname,
				image: goodsDetail && goodsDetail.pics[0],
				price: goodsDetail.price/100,
				marketPrice: goodsDetail.price/100,
				name: goodsDetail.title
		}">
		</share-popup>
		<!-- 领券 -->
		<u-popup v-model="showCoupon" mode="bottom" border-radius="14">
			<view>
				<view class="row-between" style="padding: 30rpx">
					<view class="title md bold">领券</view>
					<view class="close" @tap="showCoupon = false">
						<image class="icon-lg" src="/static/images/icon_close.png"></image>
					</view>
				</view>
				<view class="content bg-body">
					<scroll-view scroll-y="true" style="height: 700rpx">
						<coupon-list :list="couponList" @reflash="getGoodsCouponFun" :btn-type="3"></coupon-list>
					</scroll-view>
				</view>
			</view>
		</u-popup>

		<view class="share-money" :class="{ show: showCommission && enableCommission}">
			<view class="row-end">
				<view class="share-close row-center" @tap="showCommission=false">
					<u-icon name="close" size="16" color="#fff"></u-icon>
				</view>
			</view>
			<view class="share-con mt10" @tap="showShareBtn=true">
				<view class="primary" style="font-size: 45rpx;">
					{{distribution.earnings}}<text class="xs">元</text>
				</view>
				<view class="lighter xxs">
					好友下单最高可赚
				</view>
			</view>
		</view>

		<u-back-top :scroll-top="scrollTop" :top="1000"
			:customStyle="{ backgroundColor: '#FFF', color: '#000', boxShadow: '0px 3px 6px rgba(0, 0, 0, 0.1)'}"></u-back-top>
		<u-popup v-model="hospital_select.show" closeable mode="bottom" safe-area-inset-bottom>
			<view class="hospital-wrap">
				<view class="hospital-wrap__title">选择适用门店({{ hospitalNum }})</view>
				<u-tabs :list="hospital_select.tabs" :current="hospital_select.params.ot" active-color="#ff5e61"
					:showBar="false" @change="onHospitalSwitchTab" />
				<u-radio-group v-model="hospital_select.selectedIndex" @change="selectHospital">
					<scroll-view scroll-y class="hospital-list">
						<view v-for="(it, index) in hospital_select.data" :key="index"
							class="hospital-item row-between u-border-bottom" @click="selectHospital(index)">
							<view class="hospital-item__checkbox">
								<u-radio :name="index"></u-radio>
							</view>
							<view class="hospital-item__right row-between">
								<view class="hospital-item__cont">
									<view class="hospital-item__cont-title">{{ it.name }}</view>
									<view class="hospital-item__cont-address">
										<u-icon name="home"></u-icon>{{ it.address_detail }}
									</view>
									<view class="hospital-item__cont-location">
										<u-icon
											name="map"></u-icon>距离您{{ getDistance(it.lat, it.lon, location.lat, location.lon) }}
									</view>
								</view>
								<view @click.stop="goHospitalDetail(it.id)" class="hospital-item__license">查看资质</view>
							</view>
						</view>
					</scroll-view>
				</u-radio-group>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		buyOrder
	} from '@/api/order.js'
	import {
		getGoodsDetail,
		getGoodsSearch,
		addCart,
		getPoster,
		getCartNum,
		getGoodsHospitals
	} from '@/api/store';
	import {
		collectGoods
	} from '@/api/user';
	import {
		getGoodsCoupon,
		teamCheck
	} from '@/api/activity';
	import {
		mapActions,
		mapGetters
	} from 'vuex';
	import {
		arraySlice,
		trottle,
		getDistance
	} from '@/utils/tools';
	import {
		toLogin
	} from '@/utils/login';
	import {
		getUser,
		inputInviteCode
	} from '@/api/user';
	import Cache from '@/utils/cache';
	import {
		strToParams,
		loadingFun
	} from '@/utils/tools'
	import {
		loadingType
	} from '@/utils/type'
	import PageExposure from "@/mixins/page_exposure.js"

	export default {
		mixins: [PageExposure],
		data() {
			return {
				scrollTop: 0,
				percent: 0,
				isFirstLoading: true,
				isNull: false,
				showSpec: false,
				showCoupon: false,
				showShareBtn: false,
				showCommission: true,
				popupType: '',
				swiperList: [],
				goodsDetail: {
					pics: []
				},
				goodsLike: [],
				goodsType: 0,
				checkedGoods: {},
				couponList: [],
				comment: {},
				countTime: 0,
				tagStyle: {
					img: 'width:100%;'
				},
				team: {},
				teamFound: [],
				isGroup: 0,
				id: '',
				showDownload: false,
				distribution: {},
				location: null,
				selectedHospital: {
					id: 0,
					address_detail: '',
					lon: '',
					lat: '',
					name: ''
				},
				hospitalNum: 0,
				hospitalGiveway: [],
				hospital_select: {
					tabs: [{
							name: '默认排序'
						},
						{
							name: '距离最近'
						},
						{
							name: '销量最高'
						}
					],
					show: false,
					selectedIndex: -1,
					loaded: false,
					data: [],
					params: {
						id: 0,
						lat: 0,
						lon: 0,
						ot: 0
					}
				},
				init_action: '',
				pageParams: null,
				share_extra: '',
				marketer_id: null,
				indexList: {
					params: {
						page: 1,
						pagesize: 10,
						id: null,
						first_cate_id: null,
						second_cate_id: null,
						third_cate_id: null,
						province: null,
						city: null,
						search_keyword: null,
						merchant_id: null,
						order_column: null, // 排序字段 platform_commission-平台佣金（默认） sale_nunm-销量
						order_value: null, // 排序方式 desc-倒序，默认 asc-升序
						// last_group_limit: 1 // 获取未成团订单数量，默认为1
					},
					list: [],
					status: loadingType.LOADING,
				},
			};
		},
		onLoad(options) {
			this.onPageScroll = trottle(this.onPageScroll, 500, this)
			this.init_action = options.action;
			this.pageParams = options;

			if (options && options.scene) {
				let scene = strToParams(decodeURIComponent(options.scene));
				options.id = scene.id;
				this.marketer_id = scene.p
			}

			console.log(options, '分享options')

			if (options && options.marketer_id) {
				this.marketer_id = options.marketer_id

			}
			// #ifdef H5
			if (options && options.isapp == 1) {
				this.showDownload = true;
			}
			// #endif
			if (!options.id) {
				return this.$toast({
					title: '缺少参数，无法查看商品'
				}, {
					tab: 3
				});
			} else {
				this.id = options.id;
			}

			// this.getGoodsCouponFun();
			// this.getCartNum();
		},
		onPullDownRefresh() {
			this.getGoodsList();
		},
		onReachBottom() {
			this.getGoodsList();
		},
		async onShow() {
			this.location = await this.getLocation();
			console.log(this.location, 'this.location')
			await this.getGoodsDetailFun();
			this.$nextTick(() => {
				switch (this.init_action) {
					case 'share':
						this.showShareBtn = true;
						break;
					case 'singleBuy':
						this.showSpecFun(2);
						break;
					case 'switch_hospital':
						this.onShowHospitalSelector();
						break;
					case 'share_group':
						this.share_extra = 'action=join_group&fi=' + this.pageParams.fi;
						this.$nextTick(() => {
							this.showShareBtn = true;
						});
						break;
				}
			});
		},
		onPageScroll(e) {
			const top = uni.upx2px(100)
			const {
				scrollTop
			} = e
			this.percent = scrollTop / top > 1 ? 1 : scrollTop / top
			this.scrollTop = scrollTop
		},
		methods: {
			...mapActions(['getCartNum']),
			getDistance,
			async getGoodsList() {
				if (loadingType.FINISHED == this.indexList.status) return;
				const data = await loadingFun(getGoodsSearch, this.indexList.params.page, this.indexList.list, this
					.indexList.status, this.indexList.params);
				console.log(data, 'data')
				if (!data) return
				this.indexList.params.page = data.page;
				this.indexList.list = data.dataList;
				this.indexList.status = data.status;
			},
			toContact() {
				uni.switchTab({
					url: '/pages/new_service/new_service'
				})
			},
			async getLocation() {
				const [error, res] = await uni.getLocation({
					type: 'gcj02'
				})
				if (!res) {
					// #ifdef MP-WEIXIN
					// this.getAuthorize()
					// #endif
					return
				}
				if (error) {
					return {
						lat: 0,
						lon: 0
					};
				}
				return {
					lat: res.latitude,
					lon: res.longitude
				}

			},
			getCustomer() {
				console.log(12645)
			},
			async getAuthorize() {
				const [error, res] = await uni.showModal({
					title: '您已拒绝地理位置权限',
					content: '是否进入权限管理，调整授权？'
				});
				if (res.confirm) {
					const [error, res] = await uni.openSetting();
					if (res) this.getLocation()
				} else if (res.cancel) {
					this.$Router.go(-1)
				}
			},
			goHospitalDetail(id) {
				uni.navigateTo({
					url: '/pages/hospital/detail/detail?id=' + id
				})
			},
			async getGoodsDetailFun() {
				const goodsDetail = await getGoodsSearch({
					id: this.id,
					page: 1,
					pagesize: 10,
				});
				const data = goodsDetail.d.data[0]
				if (goodsDetail.s == 0) {
					let {
						pics,
						sell_etime,
						sell_stime
						// content,
						// comment,
						// like,
						// activity,
						// distribution
					} = data;
					// let {
					// 	info,
					// 	team,
					// 	team_found
					// } = activity; //秒杀时间
					// let time = info ?
					// 	info.end_time - Date.now() / 1000 //拼团时间
					// 	:
					// 	team ?
					// 	team.end_time - Date.now() / 1000 :
					// 	0;

					// if (team_found) {
					// 	team_found = arraySlice(team_found, [], 2);
					// }
					// this.distribution = distribution || {}
					this.goodsDetail = data;
					this.swiperList = pics;
					// this.comment = comment;
					// this.goodsLike = like;
					this.countTime = sell_etime - sell_stime;
					// this.goodsType = activity.type || 0;
					// this.team = team ? team : {};
					// this.teamFound = team_found ? team_found : [];
					// this.hospitalNum = data.hospital_data.near.count;
					// this.hospitalGiveway = data.hospital_data.giveway.list;
					// if (this.hospitalNum > 0) {
					// 	this.selectedHospital = data.hospital_data.near.list[0];
					// }
					// this.hospital_select.params.id = this.id;
					// this.hospital_select.params.lon = this.location.lon;
					// this.hospital_select.params.lat = this.location.lat;
					this.indexList.params.merchant_id = this.goodsDetail.merchant_id
					this.$nextTick(() => {
						this.isFirstLoading = false;
					});
					this.getGoodsList();
					// #ifdef H5
					let options = {
						shareTitle: data.name,
						shareLink: location.href + '&invite_code=' + this.userInfo.distribution_code,
						shareImage: data.image,
						shareDesc: data.remark
					};
					this.wxShare(options);
					// #endif
				} else {
					this.isNull = true
					this.isFirstLoading = false;
				}
			},
			async getGoodsCouponFun() {
				const {
					data,
					code
				} = await getGoodsCoupon({
					id: this.id
				});
				if (code == 1) {
					this.couponList = data;
				}
			},
			async collectGoodsFun() {
				if (!this.isLogin) return toLogin();
				const {
					goodsDetail: {
						is_collect
					}
				} = this;
				const {
					data,
					code
				} = await collectGoods({
					is_collect: is_collect == 0 ? 1 : 0,
					goods_id: this.id
				});
				if (code == 1) {
					if (is_collect == 0) {
						this.$toast({
							title: '收藏成功'
						});
					} else {
						this.$toast({
							title: '取消收藏'
						});
					}
					this.getGoodsDetailFun();
				}
			},
			showCouponFun() {
				if (!this.isLogin) return toLogin();
				this.showCoupon = true;
			},
			onChangeGoods(e) {
				console.log(e);
				this.checkedGoods = e.detail;
			},
			showSpecFun(type, id) {
				if (!this.isLogin) return toLogin();
				if (this.pageParams.action == 'join_group') {
					type = 3;
					id = this.pageParams.fi;
				}
				if (this.goodsType == 2 && [2, 3].includes(type)) {
					this.isGroup = 1;
					this.foundId = id;
				} else {
					this.isGroup = 0;
					this.foundId = '';
				}
				this.popupType = type;
				this.showSpec = true;
			},
			onBuy(e) {
				// let {
				// 	id,
				// 	goodsNum
				// } = e.detail;
				// const {
				// 	goodsType,
				// 	team
				// } = this;
				// let goods = [{
				// 	item_id: id,
				// 	num: goodsNum
				// }];
				// const params = {
				// 	goods,
				// 	hospital_id: this.selectedHospital.id,
				// 	goods_id: this.id
				// };
				// this.showSpec = false;
				// goodsType == 2 ? (params.teamId = team.team_id) : '';
				// this.foundId ? (params.foundId = this.foundId) : '';

				let toUrl = ''
				if (this.marketer_id) {
					toUrl = '/pages/confirm_order/confirm_order?order_id=' + encodeURIComponent(this.goodsDetail.id) +
						'&marketer_id=' + encodeURIComponent(this.marketer_id)
				} else {
					toUrl = '/pages/confirm_order/confirm_order?order_id=' + encodeURIComponent(this.goodsDetail.id)
				}

				uni.navigateTo({
					url: toUrl
				})

				// buyOrder({product_id: this.goodsDetail.id}).then(res => {
				// 	if (res.s !== 0) {
				// 		return uni.showToast({
				// 			title: res.err_str,
				// 			icon: 'none',
				// 		})
				// 	}
				// 	uni.showToast({
				// 		title: '下单成功！'
				// 	})
				// 	// .then(() => {
				// 	// 	setTimeout(() => {
				// 	// 		uni.navigateTo({
				// 	// 			url: '/pages/user_order/user_order'
				// 	// 		})
				// 	// 	}, 1000)
				// 	// })
				// 	.then(() => {
				// 		uni.navigateTo({
				// 			url: '/pages/confirm_order/confirm_order?order_id=' + encodeURIComponent(this.goodsDetail.id)
				// 		})
				// 	})
				// })

			},
			onConfirm(e) {
				const {
					team: {
						team_id
					}
				} = this;
				teamCheck({
					team_id,
					found_id: this.foundId
				}).then(res => {
					if (res.code == 1) {
						this.onBuy(e);
					}
				});
			},
			async onAddCart(e) {
				let {
					id,
					goodsNum
				} = e.detail;

				if (this.goodsType == 2) {
					// 拼团单独购买
					let goods = [{
						item_id: id,
						num: goodsNum
					}];
					uni.navigateTo({
						url: '/pages/confirm_order/confirm_order?data=' + encodeURIComponent((JSON.stringify({
							goods
						})))
					})
					return
				}
				const {
					code,
					data,
					msg
				} = await addCart({
					item_id: id,
					goods_num: goodsNum
				});
				if (code == 1) {
					this.getCartNum();
					this.$toast({
						title: msg,
						icon: 'success'
					});
					this.showSpec = false;
				}
			},
			async getHospitals() {
				if (this.hospital_select.loaded) {
					return;
				}

				uni.showLoading({
					title: '获取中...'
				});
				const data = await getGoodsHospitals(this.hospital_select.params);
				uni.hideLoading();
				this.hospital_select.data = data.data.list;
				this.hospital_select.loaded = true;
			},
			async onShowHospitalSelector() {
				await this.getHospitals();
				this.hospital_select.show = true;
			},
			onHospitalSwitchTab(index) {
				this.hospital_select.params.ot = index;
				this.hospital_select.loaded = false;
				this.hospital_select.selectedIndex = -1;
				this.getHospitals();
			},
			selectHospital(index) {
				this.hospital_select.selectedIndex = index;
				this.selectedHospital = this.hospital_select.data[index];
				this.hospital_select.show = false;
			}
		},
		async onShareAppMessage() {
			const {
				goodsDetail,
				team,
				userInfo
			} = this;
			console.log(userInfo, 'userInfo')
			return {
				title: goodsDetail.title,
				imageUrl: goodsDetail.pics[0],
				// path: '/pages/goods_details/goods_details?id=' + this.id + "&invite_code=" + userInfo.distribution_code + (this.share_extra ? `^${this.share_extra}` : '')
				path: '/pages/goods_details/goods_details?id=' + this.id + "&marketer_id=" + this.$store.getters
					.userInfo.id
			};
		},
		computed: {
			...mapGetters(['cartNum', 'userInfo']),
			btnText() {
				const {
					goodsType
				} = this;
				switch (goodsType) {
					case 1:
						return {
							red: '立即抢购',
								yellow: ''
						};
					case 2:
						return {
							red: '立即开团',
								yellow: '单独购买'
						};
					default:
						return {
							red: '立即下单',
								yellow: '加入购物车'
						};
				}
			},
			getTeamCountTime() {
				return time => time - Date.now() / 1000;
			},
			getPrepare() {
				if (this.userInfo.new_discount_num === 1 || !this.userInfo.id) {
					return ((this.goodsDetail.prepay_amount - this.goodsDetail.new_user_discount) / 100) || 0
				}
				return (this.goodsDetail.prepay_amount / 100) || 0
			},
			enableCommission() {
				const {
					goodsType,
					distribution: {
						earnings,
						is_show
					}
				} = this
				return goodsType == 0 && earnings > 0 && is_show == 1
			}
		}
	};
</script>
<style>
	page {
		background-color: #f4f4f4;
	}
</style>
<style lang="scss" scoped>
	.goods-details {
		padding-bottom: calc(120rpx + env(safe-area-inset-bottom));

		.group {
			height: 100rpx;
			width: 100%;
			background-image: url(../../static/images/pintuan_bg.png);
			background-size: 100%;

			.group-num {
				border: 1px solid #ffffff;
				border-radius: 4rpx;

				.group-icon {
					background: #fff;
					padding: 3rpx 7rpx;
				}
			}

			.down {
				height: 100%;
				background-color: #fff5e1;
				padding: 0 20rpx;
			}
		}

		.goods-info {
			position: relative;

			.info-header {
				padding: 20rpx 0 0rpx 24rpx;

				.price {
					align-items: baseline;
				}
			}

			.vip-price {
				margin: 0 24rpx;
				background-color: #FFE9BA;
				color: #FFD4B7;
				line-height: 36rpx;
				border-radius: 6rpx;
				overflow: hidden;

				.price-name {
					background-color: #101010;
					padding: 3rpx 12rpx;
					position: relative;
					overflow: hidden;

					&::after {
						content: '';
						display: block;
						width: 20rpx;
						height: 20rpx;
						position: absolute;
						right: -15rpx;
						background-color: #FFE9BA;
						border-radius: 50%;
						top: 50%;
						transform: translateY(-50%);
						box-sizing: border-box;
					}
				}
			}

			.icon-share {
				width: 37rpx;
				height: 37rpx;
			}
		}

		.discount {
			padding: 24rpx;

			.text {
				width: 100rpx;
				flex: none;
			}

			.con {
				width: 400rpx;
			}

			.coupons-item {
				overflow: hidden;

				&>view {
					position: relative;
					height: 40rpx;
					line-height: 40rpx;
					padding: 0 18rpx;
					border-radius: 6rpx;
					box-sizing: border-box;
					background-color: $-color-primary;
					color: #fff;
					white-space: nowrap;
					overflow: hidden;

					&::after,
					&::before {
						content: '';
						display: block;
						width: 20rpx;
						height: 20rpx;
						position: absolute;
						left: -14rpx;
						background-color: #fff;
						border-radius: 50%;
						border: 1px solid currentColor;
						box-sizing: border-box;
					}

					&::after {
						right: -14rpx;
						left: auto;
					}
				}
			}
		}

		.details-null {
			padding-top: 140rpx;
			margin-bottom: 100rpx;
		}

		.spec {
			padding: 24rpx;

			.text {
				width: 100rpx;
			}
		}

		.evaluation {
			.title {
				height: 100rpx;
				border-bottom: $-solid-border;
				padding: 0 24rpx;
			}

			.con {
				padding: 30rpx 24rpx;
			}

			.user-info .avatar {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
			}
		}

		.details {
			.title {
				line-height: 88rpx;
				text-align: center;
			}

			&>.content {
				padding: 0 20rpx 20rpx;
				overflow: hidden;
				line-height: 1.8;

				::v-deep image {
					vertical-align: middle;
				}

				// #ifdef H5
				::v-deep img {
					vertical-align: middle;
				}

				// #endif
				// #ifdef MP-WEIXIN || APP-PLUS
				::v-deep ._img {
					display: block;
				}

				// #endif
			}
		}

		.footer {
			height: 100rpx;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			box-sizing: content-box;
			padding-bottom: env(safe-area-inset-bottom);

			.btn {
				width: 100rpx;
				height: 100rpx;
				position: relative;
				line-height: 1.3;
			}

			.cart-num {
				position: absolute;
				left: 60rpx;
				top: 6rpx;
			}

			.add-cart,
			.right-buy {
				flex: 1;
				text-align: center;
				padding: 16rpx 0;
			}

			.add-cart {
				background-color: #ffa630;
			}

			.right-buy {
				background-color: $-color-primary;
			}
		}

		.group-play {
			.title {
				padding: 20rpx 28rpx;
				border-bottom: $-solid-border;
			}

			.steps {
				padding: 20rpx 28rpx;

				.step {
					flex: none;
				}

				.line {
					flex: 1;
					border: 1px dashed #999999;
					margin: 0 20rpx;
				}

				.number {
					border: 1rpx solid #707070;
					width: 28rpx;
					height: 28rpx;
					border-radius: 50%;
					line-height: 28rpx;
					text-align: center;
					margin-right: 6rpx;
				}
			}
		}

		.group-list {
			.group-item {
				padding: 20rpx 24rpx;

				&:not(:last-of-type) {
					border-bottom: $-solid-border;
				}

				.group-btn {
					background: linear-gradient(90deg, #f95f2f 0%, #ff2c3c 100%);
					height: 58rpx;
					padding-left: 28rpx;
					padding-right: 28rpx;
					margin-left: 30rpx;
					box-shadow: 0px 6rpx 12rpx rgba(249, 47, 138, 0.4);
				}
			}
		}

		.share-money {
			position: fixed;
			left: 20rpx;
			bottom: calc(130rpx + env(safe-area-inset-bottom));
			transform: scale(0);
			transition: all .3s;

			&.show {
				transform: scale(1);
			}

			.share-close {
				width: 34rpx;
				height: 34rpx;
				background: #a7a7a7;
				border-radius: 50%;
			}

			.share-con {
				background: url('../../static/images/bg_packet_img.png');
				width: 241rpx;
				height: 208rpx;
				background-size: 100%;
				padding-top: 20rpx;
				text-align: center;
			}
		}
	}

	.near-hospital {
		margin-top: 20upx;
		padding: 24upx;
		display: flex;

		&__title {
			color: #979797;
			margin-right: 24upx;
			flex-shrink: 0;
			font-size: 30upx;
		}

		&-cont {
			flex-grow: 1;

			&__top {
				align-items: flex-start;

				&-title {
					font-size: 30upx;
				}

				&-num {
					flex-shrink: 0;
					margin-left: 12upx;
				}
			}

			&__address,
			&__top {
				margin-bottom: 18upx;
			}

			&__address,
			&__location {
				color: #979797;
			}

			&__address-license {
				background-color: #f8d7d7;
				color: #FF5E61;
				padding: 10upx 20upx;
				border-radius: 6upx;
				display: inline-block;
				font-size: 24upx;
				margin-top: 8upx;
			}
		}
	}

	.hospital-gw {
		margin-top: 20upx;

		&__title {
			padding: 20upx;
			font-size: 30upx;
			color: #FF5E61;
		}

		&__cont {
			padding: 20upx;

			&-item {
				margin-bottom: 20upx;

				&:last-child {
					margin-bottom: 0;
				}
			}
		}
	}

	.hospital-wrap {
		padding-bottom: 40upx;

		&__title {
			text-align: center;
			font-weight: 500;
			margin: 20upx 0;
			font-size: 32upx;
		}

		.hospital-list {
			margin-top: 30upx;
			max-height: 70vh;
		}

		.hospital-item {
			margin: 0 24upx 24upx;
			padding-bottom: 24upx;

			&__checkbox {
				flex-shrink: 0;
				margin-right: 30upx;
			}

			&__right {
				flex-grow: 1;
				align-items: flex-start;
			}

			&__cont {
				margin-right: 20upx;

				&-title,
				&-address {
					margin-bottom: 20upx;
				}

				&-address,
				&-location {
					color: #979797;
				}
			}

			&__license {
				flex-shrink: 0;
				background-color: #f8d7d7;
				color: #FF5E61;
				padding: 10upx 20upx;
				border-radius: 6upx;
				display: inline-block;
				font-size: 24upx;
			}
		}
	}

	.merchants-list {
		width: 100%;
		box-sizing: border-box;
		padding: 20rpx 20rpx 0;

		.merchants-item {
			margin-bottom: 20rpx;
			border-bottom: 2rpx solid #F8F8F8;
			padding-bottom: 20rpx;

			.merchant-top {
				display: flex;
				align-items: flex-start;
				justify-content: space-between;

				.merchant-top-left {
					display: flex;
					align-items: flex-start;
					width: calc(100% - 130rpx);

					.merchant-top-main {
						margin-left: 20rpx;

						.merchant-top-title {
							color: #000000;
							font-weight: 700;
							font-size: 32rpx;
							margin-bottom: 10rpx;
						}

						.merchant-top-msg {
							color: #868A90;
							font-weight: 400;
							font-size: 24rpx;
							display: flex;
							align-items: center;
							margin-bottom: 10rpx;

							.msg-line {
								margin: 0 10rpx;
							}
						}

						.merchant-top-tips {
							display: flex;
							align-items: center;
							flex-wrap: wrap;

							.merchant-tips-item {
								padding: 6rpx 16rpx;
								line-height: 30rpx;
								text-align: left;
								color: #868A90;
								font-weight: 500;
								font-size: 24rpx;
								margin-right: 10rpx;
								background-color: rgb(245, 249, 248);
								// border-radius: 15rpx;
							}
						}
					}
				}

				.merchant-top-right {
					width: 130rpx;
					height: 42rpx;
					border-radius: 21rpx;
					text-align: center;
					line-height: 42rpx;
					font-size: 28rpx;
					color: #ffffff;
					background-color: rgb(0, 171, 127);
				}
			}

			.merchant-top-tips {
				display: flex;
				align-items: center;
				flex-wrap: wrap;

				.merchant-tips-item {
					padding: 4rpx 12rpx;
					line-height: 30rpx;
					text-align: center;
					color: rgb(185, 134, 34);
					font-weight: 500;
					font-size: 18rpx;
					margin-right: 10rpx;
					background-color: rgb(255, 240, 210);
					border-radius: 15rpx;
					margin-bottom: 8rpx;
				}
			}

			.merchant-main {
				display: flex;
				align-items: flex-start;
				justify-content: space-between;

				.merchant-product {
					width: 30%;

					.product-title {
						color: #000000;
						font-weight: 400;
						font-size: 28rpx;
						margin: 10rpx 0;
					}

					.product-price-main {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.product-price {
							color: #FF5E61;
							font-weight: 600;
							font-size: 18rpx;

							.price-color {
								font-size: 30rpx;
							}
						}

						.product-num {
							color: #A1A1B4;
							font-weight: 400;
							font-size: 20rpx;
						}
					}
				}
			}
		}
	}

	.op8 {
		opacity: 0.8;
	}

	.xz {
		font-size: 24rpx;
		padding: 20rpx;
		background-color: #fff;
	}

	.xz-value {
		color: #999;
	}

	.buy-text {
		color: #000000;
		font-size: 24rpx;
		line-height: 1.4;
	}

	.buy-text-tips {
		color: #ff5e61;
		font-size: 24rpx;
		line-height: 1.4;
		background: #fff;
		padding: 20rpx 24rpx 0;
	}

	.buy-btn-container {
		width: 50%;
		height: 100rpx;
		background-color: #FF5E61;
		color: #ffffff;
		font-size: 56rpx;
		line-height: 100rpx;
		text-align: center;

		.unit {
			font-size: 28rpx;
		}
	}
</style>